import React, { useContext, useEffect, useState } from 'react';

import { Form, Input, Button, Grid, Select } from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import { IconRefresh } from '@arco-design/web-react/icon';
import cs from 'classnames';
import styles from './style/index.module.less';
import debounce from 'lodash/debounce';

const { Row, Col } = Grid;
const { useForm } = Form;
const Option = Select.Option;
function SearchForm(props: {
  onSearch: (values: Record<string, unknown>) => void;
}) {
  const { lang, rtl } = useContext(GlobalContext);

  const t = useLocale(locale);
  const [form] = useForm();

  const handleSubmit = debounce(() => {
    const values = form.getFieldsValue();
    if (values.q) {
      values.q = values.q.trim();
    }
    props.onSearch(values);
  }, 0);

  const handleReset = debounce(() => {
    form.resetFields();
    props.onSearch({});
  }, 300);

  const colSpan = 12;

  return (
    <div className={cs(styles['search-form-wrapper'], rtl ? 'rtl' : '')}>
      <Form
        form={form}
        className={rtl ? styles['search-formrtl'] : styles['search-form']}
        labelAlign="right"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 19 }}
        onValuesChange={handleSubmit}
      >
        <Row gutter={24}>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.form.q']} field="q">
              <Input
                autoComplete="off"
                allowClear
                placeholder={t['searchTable.form.q.placeholder']}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div className={rtl ? styles['right-buttonrtl'] : styles['right-button']}>
        <Button
          icon={<IconRefresh />}
          onClick={handleReset}
          className={styles['button']}
        >
          {t['searchTable.form.reset']}
        </Button>
      </div>
    </div>
  );
}

export default SearchForm;
